<template>
    <div>
        <template v-if="route.name == 'practiceInClass'">
            <div class="onlineBox">
                <img src="@/assets/icon/online1.png" alt="" @click="toExercise">
                <img src="@/assets/icon/online2.png" alt="" @click="handleCertificate">
                <img src="@/assets/icon/online3.png" alt="" @click="toScore">
                <img src="@/assets/icon/online4.png" alt="" @click="handleView">
            </div>
        </template>
        <template v-else>
            <router-view></router-view>
        </template>
    </div>
</template>

<script setup name="practiceInClass">
import useUserStore from '@/store/modules/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import useProxyStore from '@/store/modules/proxy'
const proxyStore = useProxyStore()
const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const islogin = computed(() => !!userStore.name);

// 随堂练习
function toExercise() {
    router.push({
        path: '/knowledgeLearn/online/onlineClassroom',
    })
}
// 判断是否登陆
function needLogin() {
    ElMessageBox.confirm('请先进行登陆！！', '消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // getList();
        router.push(`/login?toUrl=${location.href}`)
    }).catch(() => { })
}
// 我的证书
function handleCertificate() {
    if (!islogin.value) {
        // 判断是否登陆
        needLogin();
    } else {
        router.push({
            path: '/knowledgeLearn/online/practiceInClass/myCertificate',
        })
    }
}
// 查看排行榜
function handleView() {
    if (!islogin.value) {
        // 判断是否登陆
        needLogin();
    } else {
        router.push({
            path: '/knowledgeLearn/online/practiceInClass/list',
        })
    }
}
// 分数图
function toScore() {
    if (!islogin.value) {
        // 判断是否登陆
        needLogin();
    } else {
        router.push({
            path: '/knowledgeLearn/online/practiceInClass/fractionalGraph',
        })
    }
}
</script>

<style scoped lang="scss">
.onlineBox {
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;

    img {
        width: 250px;
        height: 200px;
        border-radius: 20px;
        opacity: 1;
        position: relative;
        color: #fff;
        cursor: pointer;
    }
}
</style>